<template>
  <div class="buyHistory" id="buyHistory">
    <!-- 功能按钮 -->
    <div class="sensitiveWord_button">
      <a-button @click="downloadtemp">导出当前列表记录</a-button>
      <div class="selectSite_range">
        <span>购买站点：</span>
        <a-select v-model:value="sectionValue" placeholder="请选择"
          :options="sectionOptions.map((item: any) => ({ value: item.id, label: item.siteName }))" @change=""
          style="width:192px; margin-right: 24px;"></a-select>
        <span>使用范围：</span>
        <a-select v-model:value="sectionValue" placeholder="请选择"
          :options="sectionOptions.map((item: any) => ({ value: item.id, label: item.siteName }))" @change=""
          style="width:192px"></a-select>

      </div>
    </div>
    <!-- 表格展示部分 -->
    <div class="buyHistoryTable">
      <baseTable :columns="columns.MSGservice.buyHistory" :dataSource="configData.records" :rowSelection="1"
        :scroll="scroll" :isShowPagination="isShowPagination" :total="configData.total" @changePage="changePage"
        :pageSize="pageSize">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.ellipsis">
            <table-tool-tip :text="text" :column="column"></table-tool-tip>
          </template>
        </template>
      </baseTable>
    </div>

  </div>
</template>
<script lang="ts">
</script>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, createVNode, computed } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/tableColumn/systemTableColumn";
import { getTableScroll } from "@/components/table/tableConfig/table";
import msgModal from "@/components/modal/modelConfig/MsGModal";
import { Modal, message } from "ant-design-vue";
import request from "@/api/index";
import { scrollType, modeProp } from "@/type.d";
import globalFun from "@/utils/global";
import getters from "@/store/getters";

// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}
const userInfo = getters.userInfo();
//data
// 站点选择
const sectionValue = ref<string | undefined>('');
const sectionOptions = ref<dataSourceType[]>([]);
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const isShowPagination = true; // 是否需要配分页器

//表格数据
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });
// 模板文件上传配置
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
//methods
// 获取站点
const getSiteRdecord = async () => {
  //获取站点下拉选择，  因为实时变动，所以每次都得调接口
  const data: {} = {
    // orgId: userInfo.orgId,
    userId: userInfo.userId,
    allPermissions: true,
  };
  const telData = await request.fetchStationGroupList(data);
  let defaultValue: any[] = [{ id: '', siteName: '全部' }]
  sectionOptions.value = [];
  if (telData.length) {
    sectionOptions.value = defaultValue.concat(telData);
  }
};

const getRdecord = async (datas: dataSourceType = {}) => {
  // 获取表格数据
  const data: {} = {
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
    buyHistory: datas.buyHistory || "",
  };
  const telData = (await request.fetchSensitiveWordTable(data)) || {};
  let reqData = telData;
  let sourceData = ref<dataSourceType[]>([]);
  const records: any[] = [];
  reqData?.records?.map((item: any, index: number) => {
    sourceData = {
      ...item.middleDto,
      buyHistory: item.buyHistory,
      replaceWord: item.replaceWord,
      oparation: ["编辑", "删除"],
      num: index + 1,
      createUser: item.createUser,
      createTime: item.createTime,
      id: item.id,
    };
    records.push(sourceData);
  });
  configData.total = reqData.total;
  configData.size = reqData.size;
  configData.records = records;
  nextTick(() => {
    let obj = getTableScroll(74, "buyHistory");
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};
const downloadtemp = async () => {
  // 下载模板
  await request
    .fetchsensitiveWordDownloadTemp()
    .then((res: any) => {
      globalFun.downloadFile(res, "下载敏感词模板文件.xls");
    })
    .catch((err: any) => {
      console.log(err, 999129328139218);
      throw new Error(err);
    });
};
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  getRdecord(datas);
};
//onmounted
onMounted(async () => {
  getSiteRdecord();
  getRdecord();
});
</script>
<style lang="scss" scoped>
.buyHistory {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;

  .sensitiveWord_button {
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .importButton {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 8px;
    }

    .searchContent {
      margin-left: auto;
      margin-right: 0px;

      .icon-search {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.45);
        position: absolute;
        right: 12px;
        top: 0px;
      }
    }
  }


  .selectSite_range {
    font-size: 14px;
    color: #333;
  }
}
</style>
<style lang="less">
.buyHistoryTable {
  .ant-table-column-sorters {
    max-width: 90px;
  }

  .ant-table-thead .ant-table-cell:nth-last-of-type(1) {
    text-align: left;
  }
}
</style>
